import "@css/common.css"
import "@css/index.css"
import "@js/sidebar.js"
import http from "../utils/request.js"

// const pageing = {
//     pageNum:1,
//     pageSize:3,
//     total:10,
//     pages:2
// }
// 渲染所有学生的数据
function render(response) {
    const  students = response
    const studentHtml = students.map(item => {
        return `<tr>
            <td>${item._id}</td>
            <td>${item.name}</td>
            <td>${item.age}</td>
            <td>${item.sex}</td>
            <td>${item.classId.name}</td>
            <td>
                <img width="20px" src="http://127.0.0.1:3000/${item.imgSrc}" alt="">
            </td>
            <td>${item.classId.tid.name}</td>
            <td>
                <button>修改</button>
                <button id="${item._id}" class="delete">删除</button>
            </td>
        </tr>`
    })
    //     pageing.total = total
    //     pageing.pages = pages

    // 渲染学生的数据
    $("#studentsTb").html(studentHtml)
    //     // 渲染总的条数
    //     $(".total").text(pageing.total)
    //     // 总的页码
    //     $(".pages").text(pageing.pages)
    //     $(".pageSize").text(pageing.pageSize)
}
// 发送异步请求，获取学生数据，产生页面模板代码，渲染页面
async function getAllStudent() {
    // 指定访问那一台后端服务器
    const {students} = await http({ url: "/api/students/" })
    render(students)
}
getAllStudent()

//文件上传、
$("#fileImg").change(function (e) {
    // 得到选中文件对象
    const files = e.target.files;
    // 创建一个表单对象，将文件添加到表单对象里面，让表单给我们传递
    const fd = new FormData()
    fd.append("file", files[0])
    // 发送请求需要用到ajax
    $.ajax({
        url: "/api/images/uploadImage",
        type: "POST",
        data: fd,
        contentType: false, //默认不设置请求类型，jquery发送ajax请求，默认给添加请求头
        processData: false,
        cache: false,  //请求的时候默认不缓存
        success(res) {
            $(".image-frame img").prop("src", `http://localhost:3000/${res.data}`)
            $(".image-frame img").prop("data-img", `${res.data}`)
        }
    })
})

//新增学生对象
$("#addStudentsBtn").on("click",async function () {
    let name = $("#addStudentsName").val()
    let age = $("#addStudentsAge").val()
    let sex = $('[name="addStudentsGender"]:checked').val()
    let classId = $(".form-input option:selected").val()
    let imgSrc = $(".image-frame img").prop("data-img")
    let listclasses = { name, age, sex, classId, imgSrc }
     let {result,code}=await http({ url: "/api/students/", type: "post", data: listclasses })
     getAllStudent()
     $(".section-content").hide()
     $("#studentsList").show()
})
//获取所有的班级
async function getAllclasses() {
    // 指定访问那一台后端服务器
    const { classes } = await http({ url: "/api/classes/" })
    let str1 = ''
    classes.map(function (item) {
        str1 += `
        <option value="${item._id}">${item.name}</option>
        `
    })
    let str2=''
    classes.map(function (item) {
        str2 += `
        <tr>
        <th>${item.tid._id}</th>
        <th>${item.name}</th>
        <th>${item.tid.name}</th>
        <th>
        <button>修改</button>
        <button class="delete">删除</button>
        </th>
    </tr>
        `
    })
    $("#classesTb").html(str2)
    $(".form-input").html(str1)
}
getAllclasses()

//获取所有的老师数据
async function getAllteachers() {
    // 指定访问那一台后端服务器
    const { teachers } = await http({ url: "/api/teachers/" })
    let str3= ''
    teachers.map(function (item) {
        str3 += `
        <option value="${item._id}">${item.name}</option>
        `
    })
    $("#selectHeadTeacher").html(str3)
}
getAllteachers()

//新增班级对象
$("#addClassesBtn").on("click",async function () {
    let name = $("#addClassesName").val()
    let tid = $("#selectHeadTeacher option:selected").val()
    let addclasses = { name,tid}
    console.log(addclasses);
    let {classes,code}= await http({ url: "/api/classes/", type: "post", data: addclasses })
    console.log(classes);
    getAllclasses()
     $("#classesAdd").hide()
     $("#classesList").show()
})